<template>
  <div id="Point">
    <!-- 头部搜索 -->
    <el-card>
      <el-row type="flex" justify="start" align="middle">
        <el-col style="padding-left: 0">
          <div class="formClass">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              label-width="80px"
              label-position="left"
            >
              <el-form-item label="合作商搜索:">
                <el-input
                  clearable
                  v-model.trim="formInline.name"
                  placeholder="请输入"
                  style="width: 203px"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="onSubmit"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 表单部分 -->
    <el-card class="table">
      <el-row type="flex" justify="start">
        <el-button
          type="primary"
          class="TableBtn"
          icon="el-icon-circle-plus-outline"
          @click="addDialogFn(1)"
          >新建</el-button
        >
      </el-row>
      <!-- 表格主体 -->
      <Table
      :areaCode='areaCode'
       @changePage="change" :list="tableList" :businessList='businessList' :areaList='areaList' :hzsList='hzsList' ></Table>
    </el-card>
    <!-- 新建弹窗 -->
    <addDialog v-if="addShow"
    :visible.sync="addShow"
    :or="or"
    :businessList='businessList'
    :areaList='areaList'
    :hzsList='hzsList'
    @add='addFn'
    :queryParams='queryParams'/>

  </div>
</template>

<script>
import Table from '@/views/Point/ Components/Cooperation/TableCoo.vue'
import addDialog from '@/views/Point/ Components/Cooperation/AddCoo.vue'
import { painner } from '@/api/point'

export default {
  created () {
    this.getPointListFn() // 列表
    this.getAreaList() // 区域列表
    this.businessListFn() // 商圈列表
    this.collaborateListFn() // 获取合作商列表
    this.getCityFn()
  },
  data () {
    return {

      // 顶部搜索
      formInline: {
        name: '' // 合作商搜索
      },
      addShow: false, // 新增弹窗
      or: 0, // 1 新增 2编辑，
      // 接口请求参数-列表
      queryParams: {
        pageIndex: 1,
        pageSize: 10
      },
      // 给table数据
      tableList: [],
      areaList: [],
      businessList: [],
      hzsList: [],
      areaCode: []
    }
  },
  components: { Table, addDialog },
  methods: {
    // 顶部查询
    async onSubmit () {
      const res = await painner({ name: this.formInline.name, ...this.queryParams })
      this.tableList = res
    },
    // 新增弹窗
    addDialogFn (num) {
      this.or = num
      console.log(this.or, '新增')
      this.addShow = true
    },
    // 获取表格数据
    async getPointListFn () {
      const res = await painner({
        ...this.queryParams
      })
      this.tableList = res
    },
    // 获取区域列表
    async getAreaList () {
      const { currentPageRecords } = await painner({ ...this.queryParams })
      this.areaList = currentPageRecords
    },

    async change (val) {
      // console.log('出发了')
      this.queryParams.pageIndex = val
      const res = await painner({
        ...this.queryParams
      })
      this.tableList = res
      // console.log(res)
    }
  },
  provide () {
    return { getPointListFn: this.getPointListFn }
  }
}
</script>

<style lang="less" scoped>
#Point {
  box-sizing: border-box;
  width: 88.3vw;
  height: 100%;
  padding: 20px;
  background-color: #f8fafd;
}
/deep/ .el-card {
  width: 100%;
  height: 64px;
  margin-bottom: 20px;
}
/deep/ .el-card__body,
.el-main {
  /* padding: 20px; */
  padding: 0 20px;
}
/deep/ .el-form--inline .el-form-item {
  display: inline-block;
  /* margin-right: 10px; */
  vertical-align: top;
  box-sizing: border-box;
  height: 36px;
}

.formClass {
  height: 64px;
  // line-height: 64px;
  position: relative;
  /deep/ .el-form {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 10px;
  }
}
/deep/.el-input__inner {
  height: 36px;
  line-height: 36px;
}
/deep/.el-button--primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 80px;
  height: 36px;
  padding: 0;
  margin-top: 2px;
  background-color: #5f84ff;
  border: none;
}
.table {
  height: 673px;
  width: 100%;
  // background-color: blue;
  // padding: 20px;
}
.TableBtn {
  font-size: 14px;
  width: 80px;
  height: 36px;
  line-height: 36px;
  color: #fff;
  background: linear-gradient(135deg, #ff7d43, #ff5e20) !important;
  border: none;
  margin: 20px 0;
}
</style>
